<template>
	<div class="bgd_reg">
		<div class="container" style="right: 120px;top: 160px;">
			<div class="header">
				<div class="left f_gray h_lf">
					我已注册！
				</div>
				<div class="left f_red">
					<router-link to="login">
						现在登录 &gt;
					</router-link>
				</div>
			</div>
			<div>
				<div class="f_red f_weight txt_center" style="margin-top: 25px">
					用户注册
				</div>
				<div class="b_row">
					<span>
                <img src="../static/images/user_icon.png" />
            </span>
					<input v-model="referPhone" type="text" placeholder="推荐人" style="line-height: 1em;">
				</div>
				<div class="b_row">
					<span>
                <img src="../static/images/phone_icon.png" />
            </span>
					<input v-model="phone" type="text" placeholder="手机号" style="line-height: 1em;">
				</div>
				<div class="b_row">
					<span>
                <img src="../static/images/pwd_icon.png" />
            </span>
					<input v-model="password" type="text" placeholder="密码" style="line-height: 1em;">
				</div>
				<div class="simCode">
					<div class="b_row_code">
						<span>
                    <img src="../static/images/code_icon.png"/>
                </span>
						<input v-model="code" type="text" placeholder="短信验证码" style="line-height: 1em;">
					</div>
					<div class="btn_code">
						<input @click="getCode" type='button' id="btn" value="免费获取验证码">
					</div>
				</div>
				<div class="margin-left33 margin-top31">
					<input v-model="isChecked" type="checkbox">
					<label>我已阅读并同意《用户注册协议》</label>
				</div>
				<div class="b_row txt_center" style="border: 0;">
					<button :class="{isActive: isChecked}" v-bind:disabled="isDisabled" @click="registerClick" style="margin-top: 0;">立即注册</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			var self = this

		},
		data() {
			return {
				referPhone: '',
				phone: '',
				code: '',
				password: '',
				isDisabled: true,
				isChecked: false
			}
		},
		methods: {
			getCode: function() {
				var self = this
				this.$api.get('/front/base/smscode', {
					phone: this.phone,
				}, r => {
					console.log('r', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
					var countdown = 60;

					function sendemail() {
						var obj = $("#btn");
						settime(obj);
					}

					function settime(obj) { //发送验证码倒计时
						if(countdown == 0) {
							obj.attr('disabled', false);
							//obj.removeattr("disabled");
							obj.val("免费获取验证码");
							countdown = 60;
							return;
						} else {
							obj.attr('disabled', true);
							obj.val("重新发送(" + countdown + ")");
							countdown--;
						}
						setTimeout(function() {
							settime(obj)
						}, 1000)
					}
					sendemail()
				})
			},
			registerClick: function() {
				var self = this
				console.log('aa', typeof(this.phone))
				this.$api.post('/front/base/signUp', {
					referPhone: this.referPhone,
					phone: this.phone,
					code: this.code,
					password: this.password
				}, r => {
					console.log('r2', r)
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
						location.href = '/login'
					} else {
						self.$message(r.error);
					}
				})
			}
		},
		watch: {
			isChecked: function() {
				console.log('a', this.isChecked)
				if(this.isChecked === true) {
					this.isDisabled = false
				} else {
					this.isDisabled = true
				}
			}
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>